<template>
	<view class="container">
		<!-- 申请说明 -->
		<view class="order-item">
			<view class="status-box">
				<view class="name">申请说明</view>
				<view class="tip">您可以输入200字以内</view>
			</view>
			<view class="content-box">
				<u--textarea height="200rpx" border="none" v-model="content" placeholder="请填写申请说明" ></u--textarea>

				<view class="upload-box">
                    <u-upload
                      :fileList="images"
                      @afterRead="afterRead"
                      @delete="deletePic"
                      :multiple="false"
                      :maxCount="3"
                      :previewFullImage="true"
                    ></u-upload>

<!--					<u-image width="200rpx" height="200rpx" src="/static/images/upload.png" @tap="chooseImage"></u-image>-->
				</view>
			</view>
		</view>
	</view>

	<view class="btn">
		<u-button throttleTime="1000"
			:customStyle="{height: '86rpx', boxShadow: '0rpx 4rpx 34rpx 1rpx rgba(87,129,240,0.4)', letterSpacing: '.1rem'}" :hairline="false"
			type="mini" shape="circle" color="linear-gradient(315deg, #4975EC 0%, #97B3FF 100%)" @click="applyConfirm"
			>提交申请</u-button>
	</view>
</template>

<script setup>
    import {ref} from "vue"
    import {onLoad} from '@dcloudio/uni-app'
    import {getUploadToken, uploadImage} from "@/api/upload";
    import useUniAPi from "@/hooks/useUniAPi";
    import {applyAfterSales} from "@/api/rma";
    const { navigateTo, redirectTo } = useUniAPi()
    const goBack = () => {
        uni.navigateBack()
    }

    const orderId = ref(0)
    const rmaType = ref('')

    onLoad((evt) => {
        if (!evt?.order_id || !evt?.rma_type) {
            goBack()
        }
        orderId.value = evt.order_id
        rmaType.value = evt.rma_type

        if (rmaType.value === 'return_and_refund') {
            uni.setNavigationBarTitle({
                title: '退货退款申请'
            })
        }
        if (rmaType.value === 'refund_do_not_return') {
            uni.setNavigationBarTitle({
                title: '退款申请'
            })
        }
        if (rmaType.value === 'exchange') {
            uni.setNavigationBarTitle({
                title: '换货申请'
            })
        }
    })

    const star = ref(0)
	const content = ref('')

    const images = ref([])

    const afterRead = async (event) => {
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        images.value.push({
            ...event.file,
            status: 'uploading',
            message: '上传中'
        })
        console.log(event)

        const {code, data, message} = await getUploadToken()
        if (code !== 1) {
            uni.showModal({
                title: '提示',
                content: message ?? "获取上传token异常",
                showCancel: false,
                success: function (res) {
                }
            });
            return
        }

        const uploadRes = await uploadImage({file: event.file.url}, data.token)
        const uploadResData = JSON.parse(uploadRes)
        if (uploadResData.code === 1) {
            images.value.splice(event.index,1, Object.assign(event.file, {
                status: 'success',
                message: '',
                url: uploadResData.data.url,
                path: uploadResData.data.path
            }))
        }
        console.log(uploadResData)
    }

    const deletePic = (event) => {
        console.log(event)
        images.value.splice(event.index, 1)
        console.log(images.value)
    }

	// 上传图片
	const chooseImage = () => {
		uni.chooseImage({
			success: (chooseImageRes) => {
				const tempFilePaths = chooseImageRes.tempFilePaths;
                console.log(tempFilePaths)

			}
		});
	}

	// 提交售后申请
	const applyConfirm = async () => {

        if (!content.value) {
            uni.showToast({
                mask: true,
                title: '请填写您的申请内容!',
                icon: 'none'
            })
            return
        }

        let img = images.value.map(item => {
            return item.path
        })

        uni.showLoading({
            title: '加载中'
        });

        const {code, data, message} = await applyAfterSales(
          {
              orderId: orderId.value,
              rmaReason: content.value,
              rmaType: rmaType.value,
              rmaImages: img,
          })

        uni.hideLoading();

        if (code === 1) {
            uni.showToast({
                mask: true,
                title: '申请成功!',
                icon: 'success'
            })
            setTimeout(() => {
                goBack()
            }, 500)
        } else {
            uni.showModal({
                title: '提示',
                content: message ?? "请求异常",
                showCancel: false,
                success: function (res) {
                }
            });
        }
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 60rpx 26rpx;
	}

	.order-item {
		margin-bottom: 36rpx;
		padding: 38rpx 38rpx 1rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		.status-box {
			@include between(100%);
			padding-bottom: 32rpx;
			border-bottom: 1rpx solid #E8E8E8;
			margin-bottom: 30rpx;

			.name {
				font-size: 30rpx;
				font-weight: bold;
				color: #000000;
			}
			.tip {
				color: #999999;
			}

			.status {
				color: #D66A44;
			}

			.status1 {
				color: #AAAAAA;
			}
		}
		.default {
			padding-bottom: 0;
			border-bottom: none;
			justify-content: flex-start;
			.name {
				margin-right: 36rpx;
			}
		}
		.content-box {
			width: 100%;
			position: relative;
			font-size: 26rpx;
			color: #606672;
			.upload-box {
				margin-top: 30rpx;
				padding-bottom: 30rpx;
                .image-box {
                    display: flex;
                }
			}
		}
	}

	.btn {
		padding: 0 55rpx;
		width: 100%;
		position: fixed;
		left: 50%;
		bottom: 70rpx;
		transform: translateX(-50%);
		z-index: 9;
	}
</style>
